<style lang="less">
	page{
		background: #f6f6f6;
		
	}
	.main{
		margin-top: 20upx;
		.main-top{
			display: flex;
			justify-content: space-between;
			background: #FFFFFF;
			padding:20upx 30upx;
			box-sizing: border-box;
			.main-top-fl{
				.title{
					font-size:24upx;
					color:rgba(51,51,51,1);
					line-height:29upx;
					margin-right: 20upx;
				}
				.money{
					font-size:40upx;
					font-family:'DINCond';
					font-weight:400;
					color:rgba(217,192,145,1);
					line-height:48upx;
				}
			}
			.main-top-fr{
				.time{
					font-size:24upx;
					color:rgba(51,51,51,1);
					line-height:29upx;
					margin-right: 20upx;
				}
				.xuanze{
					width: 24upx;
					height: auto;
				}
			}
		}
	}
	.main-tab{
		margin-top: 20upx;
		position: sticky;
		top: 0upx;
		background: #FFFFFF;
		z-index: 100;
	}
	.tabs-title{
		background: #FFFFFF;
		padding: 20upx 30upx;
		border-top: 1px solid #ededed;
		position: sticky;
		top: 84upx;
		z-index: 99;
		border-bottom: 20upx solid #f6f6f6;
		view{
			font-size:24upx;
			color:rgba(153,153,153,1);
			line-height:29upx;
			text{
				font-size:36upx;
				font-family:'DINCond';
				font-weight:400;
				color:rgba(217,192,145,1);
				line-height:43upx;
				margin-left: 20upx;
			}
		}
		.zanwu{
			text-align: center;
		}
	}
	.tabs-main{
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
		.tabs-main-for{
			overflow: hidden;
			border-bottom:1px solid #ededed;
			padding:20upx 0;
			.tabs-main-for-fl{
				float: left;
				width: 136upx;
				height: 136upx;
				overflow: hidden;
				border-radius: 4upx;
				border:1px solid #ededed;
				box-sizing: border-box;
				padding: 5upx;
				display:flex;
				align-items:center;
				.for-img{
					width: 100%;
					height: auto;
				}
			}
			.tabs-main-for-fr{
				float: right;
				width: calc(100% - 160upx);
				.title{
					font-size:26upx;
					color:rgba(51,51,51,1);
					line-height:42upx;
					height: 82upx;
					overflow:hidden;
					text-overflow:ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
				}
				.money{
					font-size:30upx;
					font-family:'DINCond';
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:48upx;
					text-align: right;
				}
			}
		}
		.tabs-main-for:last-child{
			border: none;
		}
	}
</style>
<template>
	<view class="main">
		<view class="main-top">
			<view class="main-top-fl">
				<text class="title">业绩总额</text>
				<text class="money">¥ {{infoTeam}}</text>
			</view>
			<view class="main-top-fr">
				<text class="time" :class="{'active':index==tabIndex}" @tap="toggleTab(item,index)" v-for="(item,index) in tabList" :key="index">{{item.name}}</text>
				<image src="/static/img/arrowup_xia@2x.png" class="xuanze" mode="widthFix"></image>
			</view>
		</view>
		<w-picker
			v-if="selectList.length!=0"
			mode="selector" 
			:defaultVal="[0]" 
			@confirm="onConfirm" 
			ref="selector" 
			themeColor="#f00"
			:selectList="selectList"
		></w-picker>
		<view class="main-tab">
			<uni-segmented-control :current="current" :values="classList" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-show="current === i" v-for="(itme,i) in classList">
				<view class="tabs-title">
					<view v-if="itme.classList !=null && itme.classList !=''">{{itme.name}}总额<text>¥ {{itme.team}}</text></view>
					<view v-else class="zanwu">暂无数据!</view>
				</view>
				<view class="tabs-main">
					<view class="tabs-main-for" v-for="(list,i) in itme.classList">
						<view class="tabs-main-for-fl">
							<image v-if="list.img!='' && list.img!=null && list.img!=undefined" :src= "'https://static.xpandago.net'+'/'+list.img" class="for-img" mode="widthFix"></image>
							<image v-else src='https://static.xpandago.net/wechat/images/logo.png' class="for-img" mode="widthFix"></image>
						</view>
						<view class="tabs-main-for-fr">
							<view class="title">{{list.goodsName}}</view>
							<view class="money">¥ {{list.goodsPrice}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	import uniSegmentedControl from '@/components/uni-segmented-control-one/uni-segmented-control-one.vue';
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			'uni-segmented-control':uniSegmentedControl,
			wPicker
		},
		data() {
			return {
				type:'',//时间选择传参
				token:'',
				infoName:'',//名称
				infoTeam:'',//实时金额
				classList:[],//循环数据
				current: 0,
				colorIndex: 0,
				activeColor: 'rgba(51,51,51,1)',
				styleType: 'button',
				mode:"range",
				defaultVal:[0,0,0,0,0,0,0],
				tabList:[{
					mode:"selector",
					name:"请选择日期"
				}],
				selectList:[],
				tabIndex:0,
				resultInfo:{
					result:""
				}
			}
		},
		onLoad() {
			this.token=uni.getStorageSync('token')
			this.perforInfo();
			this.typeList();
		},
		methods: {
			//业绩详情
			async perforInfo(){
				const [err, res] = await api.perforInfo({
						query: {
							type:this.type,
							isZs:1
						},
						header:{
							'Content-Type': 'application/json',
							'token': this.token
						}
					 });
				 console.log(res.data)
				 if(res.data.code == 0){
					 this.infoName=res.data.data.name
					 this.infoTeam=res.data.data.team
					 this.classList=res.data.data.classList
				 }else{
				 }
			},
			//业绩时间
			async typeList(){
				const [err, res] = await api.typeList({
						header:{
							'Content-Type': 'application/json',
							'token': this.token
						}
					 });
				 console.log(res.data)
				 if(res.data.code == 0){
					 this.selectList=res.data.data
					 if(this.selectList.length>0){
						 this.tabList[0].name=this.selectList[0].name
					 }
				 }else{
				 }
			},
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index
				}
			},
			//选择日期
			toggleTab(item,index){
				this.tabIndex=index;
				this.mode=item.mode;
				this.defaultVal=item.value;
				this.$refs[item.mode].show();
			},
			//组件选择返回的参数
			onConfirm(val){
				this.resultInfo=val;
				this.tabList[0].name=this.resultInfo.checkArr.name;
				this.type=val.checkArr.currentTime;
				this.perforInfo();
			}
		}
	}
</script>
